@base-width: 1920;
@base-height: 1080;
@base-n: 100;
@rem-pre-px: 1rem * (@base-n / @base-height);
@sider-top: 100% * (86 / @base-height);
@sider-width: 100% * (344 / @base-width);
@header-height: 100% * (138 / @base-height);
@bottom-height: 100% * (226 / @base-height);
@padding: 100% * (30 / @base-width);
@component-padding: 1rem * (@base-n * 26 / @base-height);
@component-interval: 1rem * (@base-n * 22 / @base-height);
@title-fontsize: 1rem * (@base-n * 40 / @base-height);
@component-title-fontsize: 1rem * (@base-n * 16 / @base-height);
@background: linear-gradient(90deg, #111621 0%, #171c2a 100%);

// rem 是通过页面height计算出的，如果需要元素水平方向的自适应，最好通过百分比计算

.asset-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 800px;
  background: @background;
  font-size: 10.8px;
  color: #ffffff;
  overflow: hidden;

  // 地图内加载效果背景色去除
  .ant-spin-blur::after {
    display: none;
  }

  .top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem * (@base-n * 138 / @base-height);
    background-image: url('./images/header-bg.png');
    background-size: 100% 100%;
    background-position: center;
    z-index: 100;

    .title {
      text-align: center;
      font-size: @title-fontsize;
      font-weight: bold;
      color: #ffffff;
      line-height: 1;
      margin-top: 1rem * (@base-n * 61 / @base-height);
      user-select: none;
    }
    .back-button {
      position: absolute;
      padding-left: 26 * @rem-pre-px;
      top: 16 * @rem-pre-px;
      right: @padding;
      font-size: 16 * @rem-pre-px;
      color: #ffffff;
      background-image: url('./images/icon/quit.png');
      background-size: 24 * @rem-pre-px;
      background-repeat: no-repeat;
      background-position-y: center;
    }
  }
  .info-review-wrapper {
    position: absolute;
    top: 157 * @rem-pre-px;
    left: 100% * (472 / @base-width);
    right: 100% * (472 / @base-width);
    height: 146 * @rem-pre-px;
    z-index: 1000;
    user-select: none;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: absolute;
    top: @sider-top;
    left: @padding;
    bottom: @padding;
    width: @sider-width;
    z-index: 1000;
    transition: all 0.15s;

    .title {
      font-size: @component-title-fontsize;
      font-weight: bold;
    }
    .search {
      flex: 0 0 1rem * (@base-n * 30 / @base-height);
      margin-bottom: @component-interval;
      box-sizing: border-box;
      border-radius: 4px;
      background: #1b2841;
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0 1px 5px rgba(255, 255, 255, 0.5) inset;
      .ant-cascader-picker {
        background: none;
        border: none;
        color: #ffffff;
        .ant-cascader-picker-arrow {
          color: #ffffff;
        }
        .ant-cascader-input {
          border: none;
          outline: none;
          font-size: 1rem * (@base-n * 14 / @base-height) !important;
          height: initial;
          transition: none;
          user-select: none;
        }
        .ant-cascader-picker-clear {
          background-color: #1d2337;
          color: #ffffff;
        }
      }
    }
    .left-top {
      flex: 1 1 1rem * (@base-n * 315 / @base-height);
      background-image: url('./images/left-top-bg.png');
      background-size: 100% 100%;
      background-position: center;
      margin-bottom: @component-interval;
      padding-left: 16 * @rem-pre-px;
      padding-right: 16 * @rem-pre-px;
      .title {
        padding-left: 0.5 * @component-padding;
        cursor: pointer;
      }
    }
    .left-bottom {
      flex: 1 1 1rem * (@base-n * 582 / @base-height);
      background-image: url('./images/left-bottom-bg.png');
      background-size: 100% 100%;
      background-position: center;
      margin-bottom: @component-interval;
      .title {
        margin-bottom: 16 * @rem-pre-px;
      }
    }
  }
  .map {
    position: absolute;
    top: @sider-top;
    left: @sider-width - 2 * @padding;
    right: @sider-width - 2 * @padding;
    bottom: calc(@bottom-height - @padding);
    z-index: 10;
    mask-image: linear-gradient(to right, transparent, #222739 20%, #222739 80%, transparent);
    mask-repeat: no-repeat;
    mask-composite: add;
    overflow: hidden;
    cursor: pointer;
    .leaflet-container {
      mask-image: linear-gradient(to top, transparent, #111621 20%, #171c2a 80%, transparent);
      mask-repeat: no-repeat;
      mask-composite: add;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: @sider-top;
    right: @padding;
    bottom: @padding;
    width: @sider-width;
    z-index: 1000;
    transition: all 0.15s;
    .title {
      font-size: @component-title-fontsize;
      font-weight: bold;
    }
    .right-top {
      flex: 1 1 1rem * (@base-n * 340 / @base-height);
      background-image: url('./images/right-top-bg.png');
      background-size: 100% 100%;
      background-position: center;
      margin-bottom: @component-interval;
    }
    .right-bottom {
      flex: 1 1 1rem * (@base-n * 608 / @base-height);
      background-image: url('./images/right-bottom-bg.png');
      background-size: 100% 100%;
      background-position: center;
      margin-bottom: @component-interval;
    }
  }
  .bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: @bottom-height;
    background-image: url('./images/bottom-bg.png');
    background-size: 100% 100%;
    background-position: center;
    z-index: 100;
  }
  .top10-vuls-wrapper {
    position: absolute;
    padding: 0 84 * @rem-pre-px;
    bottom: 36 * @rem-pre-px;
    left: 100% * (394 / @base-width);
    right: 100% * (394 / @base-width);
    height: 160 * @rem-pre-px;
    z-index: 1000;
    background-image: url('./images/bottom-line.png');
    background-size: 100% 2%;
    background-repeat: no-repeat;
    background-position: center 130 * @rem-pre-px;
  }

  &-search-popup {
    font-size: 1rem * (@base-n * 14 / @base-height);
    background-color: #1b2841;
    color: #ffffff;
    .ant-cascader-menu:not(:last-child) {
      border-right-color: #475174;
    }
    .ant-cascader-menu-item:hover {
      background-color: #162034;
    }
    .ant-cascader-menu-item-active {
      background-color: #162034;
    }
    .ant-cascader-menu-item-expand-icon {
      color: #ffffff;
    }
  }

  .left-top,
  .left-bottom,
  .right-top,
  .right-bottom {
    display: flex;
    flex-direction: column;
    padding: @component-padding;
    .title {
      flex: 0;
    }
    .ant-spin-nested-loading {
      flex: 1;
    }
    .ant-spin-container {
      height: 100%;
    }
  }
}
